<template>
  <div class="one">
    <div class="van-cell__title">汇总</div>
    <van-collapse class="top-cc" v-model="activeName" accordion style="margin: 10px 15px">
      <div v-for="(item,index) in list" :key="index" style="margin-bottom: 10px">
        <van-collapse-item :value="item.name" :name="index+1">
          <div class="top-a" v-for="(page,i) in pageList" :key="i">
            <span class="dlym">{{page.pageName}}</span>
            <span class="fszj" :style="{color:color[i]}">{{page.grade}}</span>
            <span class="top">分</span>
          </div>
        </van-collapse-item>
      </div>
    </van-collapse>
    <Footer page="summary"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import { Summary, Summarylist } from "@/API/Summary.js";
import axios from "axios";
import { log } from "util";
export default {
  mounted() {
    // if (this.Fraction < 60) {
    //   this.$refs.sp.style.color = "red";
    // } else if (this.Fraction < 80 && this.Fraction >= 60) {
    //   this.$refs.sp.style.color = "#d0c727";
    // } else if (this.Fraction <= 100 && this.Fraction >= 80) {
    //   this.$refs.sp.style.color = "green";
    // }
    // if (this.Fraction < 60) {
    //   this.kk = "red";
    // } else if (this.Fraction < 80 && this.Fraction >= 60) {
    //   this.kk = "#ded32b";
    // } else {
    //   this.kk = "green";
    // }
  },
  components: {
    Footer
  },
  data() {
    return {
      color: [],
      activeName: "1",
      Fraction: 0,
      list: [],
      pageList: []
    };
  },
  methods: {},
  created() {
    Summary().then(res => {
      console.log(res);
      this.list = res.list;
    }),
      Summarylist().then(err => {
        console.log(err);
        this.pageList = err.list;
        this.pageList.forEach(page=>{
          if(page.grade < 60) {
            this.color.push("red")            
          }else if(page.grade>=60 && page.grade< 80){
            this.color.push("#ded32b")
          }else {
            this.color.push("green")
          }
        })
        console.log(this.color)

      });
  }
};
</script>
<style  scoped>
.top-cc {
  height: 98%;
  overflow: scroll;
  padding-bottom: 40px;
}
.one {
  width: 100%;
  height: 100vh;
  /* background: url(../../img/my-img/img4.jpg) no-repeat center/cover; */
  background: url(../../assets/img1.jpg) no-repeat center/cover;
}
.top-a {
  position: relative;
}
.fszj {
  position: absolute;
  right: 20px;
  color: aqua;
  font-size: 15px;
  font-weight: 700;
}
.re {
  color: red;
}
.top {
  position: absolute;
  right: 0;
}
.van-cell__title {
  text-align: center;
  font-size: 18px;
  width: 100%;
  height: 49px;
  line-height: 49px;
  background: #fff;
  /* margin-bottom: 20px; */
}
</style>
